<template>
  <div class="recharge">
    <div class="recharge_nav">
      <van-nav-bar title="充值" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="recharge_content">
        <div class="recharge_content_header">
            <div class="content_left">充值方式</div>
            <div class="content_center">
                <div><van-icon name="gold-coin-o" color="#0A861D" />**银行(5588)</div>
                <div><span>单日交易限额￥50000.00</span></div>
            </div>
            <div class="content_right"><van-icon name="arrow" color="#aaa" size="20px"/></div>
        </div>
        <div class="recharge_content_content">
            <div class="content_content_top">
                充值金额
            </div>
            <div class="content_content_center">
                <van-field v-model="money" label="￥" size="large"/>
            </div>
            <div class="content_content_botton">
                <van-button type="primary" block round color="#FFA500" @click="recharge">充值</van-button>
            </div>
        </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
import { Toast } from 'vant';
export default {
    data(){
        return{
            money:''
        }
    },
    computed:{

    },
    created(){

    },
    methods:{
        ...mapActions('money',['toRecharge']),
        onClickLeft(){
            this.$router.push({path:'/manager/money'})
        },
        recharge(){
            let id = localStorage.getItem('id');
            let money = this.money
            this.toRecharge('id='+id+'&'+'money='+money).then(res=>{
                this.money='';
                Toast.success('充值成功');
                this.$router.push({path:'money'})
            })
        }
    }
}
</script>
<style scope>
  .recharge_content_header>div:nth-child(2){
      margin-top:10px;
  }
  .recharge_content_header>div:last-child{
      margin-top:20px;
      font-weight: 700;
      font-size:35px;
      text-align:center
  }
  .money_botton{
      padding:20px;
      height: 100px;
  }
  .money_botton>*{
      margin-bottom:20px;
  }
  .recharge_content_header{
      height: 142px;
      width:100%;
      background-color: #F1F1F1;
      border-top:1px solid #ccc
  }
  .content_left{
      width:25%;
      height:142px;
      line-height: 142px;
      float: left;
      text-align: center;
      font-size:15px;
  }
  .content_center{
      width:45%;
      height:142px;
      font-size:13px;
      float: left;
      text-align: left;
      padding-top:45px;
      margin-left:15px;
  }
  .content_center>div:nth-child(2){
      color: #aaa;
      font-size:12px
  }
  .content_right{
      width:20%;
      height:142px;
      line-height: 100px;
      text-align:right;
      float: right;
  }
  .content_right>*{
      cursor: pointer;
  }
  .recharge_content_content{
      width:80%;
      margin:0 auto;
      height:200px;
  }
  .content_content_top{
      width:100%;
      border-bottom:1px solid #DDD;
      padding:20px;
      text-align: left;
      margin: 0 auto;
      font-size:14px;
  }
  .content_content_botton{
      margin-top:30px
  }

</style>